<template>
  <div>
    <Title>{{items.text}}</Title>
    <!-- 轮播图 -->
    <Sswipe></Sswipe>
    <!-- 金刚区 -->
    <van-grid :column-num="num">
      <van-grid-item
        v-for="(item,index) in items.children"
        :key="index"
        :icon="item.photo"
        :text="item.text"
        @click="classfiyItem(index)"
      />
    </van-grid>
    <!-- 搜索 -->
    <van-search v-model="value" placeholder="搜索商品" />
    <!-- 商品展示 -->
    <div class="goods-list" v-if="true">
      <GoodItem  :goodslist="goodslist"></GoodItem>
    </div>
    <!-- 热销榜 -->
    <div class="hottop" v-else>
      <img src="../../assets/cyimages/images/hottop_05.png" alt />
    </div>
    <!-- footer -->
    <footer class="footer">有赞提供技术支持</footer>
  </div>
</template>

<script>
import Vue from "vue";
import Title from "home/Title";
import Sswipe from "home/Sswipe";
import { Grid, GridItem, Search } from "vant";
import { getGoodsList } from "@/api/goods.js";
import GoodItem from 'components/goods/GoodItem.vue'

Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Search);
export default {
  data() {
    return {
      value: "",
      item: {},
      num:0,
      goodslist:[],
    };
  },
  components: {
    Title,
    Sswipe,
    GoodItem
  },
  methods: {
    // cyGrid传递的数据
    getItem() {
      this.items = JSON.parse(this.$route.params.item);
      console.log(this.items);
    },
    // 计算金刚区行数
    getNumb(){
      this.num = this.items.children.length
      if(this.num===6){
        this.num = this.num/2
      }
      console.log(this.num)

    },
    // 查询商品
    classfiyItem(index){
      console.log(index)
      console.log(this.items.itemId)
      this.$router.push(
        {
          path:'/goods',
          query:{
            classfiy:index+1,
            bigclassify:this.items.itemId
          }
        }
      )
    },
    // 获取商品数据
    async getGoods(params) {
      let rs = await getGoodsList(params);
      this.goodlistNew = rs.data;
      this.goodslist = this.goodlistNew.filter(item =>{
        return  item.bigclassify===this.items.itemId
      })
      console.log(this.goodslist);
    },
  },
  created() {
    this.getItem()
    this.getNumb()
    this.getGoods()
  },
  computed: {},
  mounted(){
    
  }
};
</script>

<style lang="stylus" scoped>
.van-search {
  background-color: #f9f9f9;
}

.van-search .van-cell {
  background-color: #fff;
}

.hottop {
  height: 284px;
}

.hottop img {
  width: 100%;
}

.footer {
  line-height: 50px;
  line-height: 50px;
  background-color: #f9f9f9;
  text-align: center;
}
</style>